<template>
	<view class="unitShop">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)' zindex='999'>{{title}}</custom-navi>
		<view class="unitShop-head">
			<view class="list" v-for="(item,index) in dataList" :key="index" @tap="choiceBtn(index)">
				<view class="list-round" :class="{'loop':subscript===index}">
					<view class="centre" :class="{'centres':subscript===index}"></view>
				</view>
				<view class="list-title">{{item.title}}</view>
			</view>
			<view class="all" @tap="allBtn" v-if="typeId==='2'">
				<view class="all-txt">{{filtrate}}</view>
				<view class="all-img">
					<image src="/static/richTxt/xia1.png" mode="" v-if="allData===false"></image>
					<image src="/static/richTxt/shang.png" mode="" v-else></image>
				</view>
			</view>
			<view class="modal" v-if="allData">
				<view class="modal-list">
					<view class="option" v-for="(item,index) in modalList" :key="index" @tap="optionBtn(index)">
						<view class="option-title">{{item.title}}</view>
						<view class="option-icon" :class="{'icons':options===index}"><image src="/static/richTxt/gou.png" mode=""></image></view>
					</view>
				</view>
			</view>
			<!-- <view class="arrows" @tap="allBtn" v-if="typeId==='2'">
				<image src="/static/richTxt/xia1.png" mode="" v-if="allData===false"></image>
				<image src="/static/richTxt/shang.png" mode="" v-else></image>
			</view> -->
		</view>
		<view class="unitShop-search">
			<view class="icon"><image src="/static/richTxt/lsss.png" mode=""></image></view>
			<view class="input"><input type="text" value="" placeholder="请输入店主手机号" placeholder-style="font-size:28rpx;color:rgba(153,153,153,1);"/></view>
		</view>
		<view class="unitShop-content">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
			<view class="kong" v-if="contentList.length === 0"><image src="/static/richTxt/kong2.png" mode=""></image><view class="">暂无数据</view></view>
			<view class="lists" v-for="(item,index) in contentList" :key="index" v-else>
				<view class="list">
					<view class="list-img"><image src="/static/icon/head.jpg" mode=""></image></view>
					<view class="list-txt">
						<view class="phone">137****2798</view>
						<view class="time">加入时间:2019.10.10</view>
					</view>
					<view class="list-money">
						<view class="ranking">
							<image :src="item.icon" mode=""></image>
							<view class="paimi">{{item.ranking}}</view>
						</view>
						<view class="price">累计收益:<text>50000</text>元</view>
					</view>
				</view>
				<view class="location" v-if="typeId==='2'">门店位置:珠海市明珠北路22号</view>
			</view>
			</s-pull-scroll>
		</view>
		<view v-if="allData" @tap="bgBtn" class="" style="position: absolute;top: 0;left: 0;background-color: #000000;opacity: 0.2;width: 100%;height: 100%;z-index: 99;"></view>
		<!-- <uni-popup ref="popup" type="center">
			<view class="modal">
				<view class="modal-list">
					<view class="option" v-for="(item,index) in modalList" :key="index" @tap="optionBtn(index)">
						<view class="option-title">{{item.title}}</view>
						<view class="option-icon" :class="{'icons':options===index}"><image src="/static/richTxt/gou.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	// import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	import sPullScroll from '@/src/pages/components/s-pull-scroll/index.vue';
	export default{
		components: { sPullScroll },
		data(){
			return{
				contentList:[
					// {img:'',phone:'',time:'',money:'',ranking:'1',icon:''},
					// {img:'',phone:'',time:'',money:'',ranking:'2',icon:''},
					// {img:'',phone:'',time:'',money:'',ranking:'3',icon:''},
					// {img:'',phone:'',time:'',money:'',ranking:'4',icon:''},
					// {img:'',phone:'',time:'',money:'',ranking:'5',icon:''}
				],
				modalList:[
					{title:'所有商家'},
					{title:'供应链商家'},
					{title:'生活圈商家'}
				],
				dataList:[
					{title:'今日排行'},
					{title:'周排行'},
					{title:'月排行'}
				],
				title:'',
				typeId:'',
				subscript:0,
				allData:false,
				page: 1,
				size: 10,
				options:'',
				filtrate:'所有商家',
			}
		},
		onLoad(option) {
			this.typeId = option.id
			console.log(option.id)
			if(option.id === '1'){
				this.title = '个人店主(15)'
			}else if(option.id === '2'){
				this.title = '商家(25)'
			}else if(option.id === '3'){
				this.title = '城市合伙人(14)'
			}
			this.pushimg()
		},
		methods:{
			
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page =1
						this.size=10
						// this.listFrom()
					}else{
						if(this.size>this.total){
							pullScroll.empty()
						}else{
							// this.page=this.page+1
							this.size=this.size+10
							// this.listPush()
							// this.listFrom()
						}
					}
					// const curList = [];
					// for (let i = this.list.length; i < this.list.length + 20; i++) {
					// 	curList.push(i);
					// }
					// this.list = this.list.concat(curList);
					// if (this.contentList.length > 60) {
					// 	// finish(boolean:是否显示finishText,默认显示)
					// 	pullScroll.finish(this.contentList.length > 5);
					// } else {
					// 	pullScroll.success();
					// }
					// console.log(pullScroll.page)
					// console.log(11114)
					pullScroll.success();
				}, 1000);
			},
			//**********************************************************
			optionBtn(index){ // 所有商家选择按钮
				this.options = index
				this.filtrate = this.modalList[index].title
				// this.$refs.popup.close();
				this.allData = false
			},
			bgBtn(){
				this.allData = false
			},
			allBtn(){ // 所有商家按钮
				if(this.allData === false){
					this.allData = true
					// this.$refs.popup.open()
				}else{
					this.allData = false
					// this.$refs.popup.close();
				}
				console.log(this.allData)
			},
			choiceBtn(index){ // 切换排行
				this.subscript = index
			},
			pushimg(){
				if(this.contentList,length===0) return
				for(var i=0;i<3;i++){
					this.contentList[i].icon = '/static/richTxt/ranking'+(i+1)+'.png'
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
	// .navi-wrap{
	// 	.navi{
	// 		z-index: 999;
	// 	}
		
	// }
	.unitShop{
		height: 100vh;
		.modal{
			width:100%;
			height:480rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			// margin-top: 176rpx;
			&-list{
				width: 100%;
				position: absolute;
				bottom: 0;
				.option{
					width: 100%;
					padding: 20rpx 32rpx;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(89,89,89,1);
					opacity:1;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid rgba(242, 242, 242, 1);
					&-icon{
						margin-left: auto;
						width: 22rpx;
						height: 22rpx;
						opacity:0;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.icons{
						opacity:1;
					}
				}
			}
		}
		&-content{
			width:690rpx;
			margin: auto;
			margin-top: 22rpx;
			position: relative;
			height: 77%;
			.kong{
				width: 400rpx;
				height: 400rpx;
				margin: auto;
				image{
					width: 100%;
					height: 100%;
				}
				text-align: center;
			}
			.lists{
				width:690rpx;
				background:rgba(255,255,255,1);
				box-shadow:0rpx 2rpx 12rpx rgba(0,0,0,0.15);
				opacity:1;
				border-radius:10rpx;
				margin-bottom: 20rpx;
				.location{
					width: 100%;
					padding: 16rpx;
					text-align: center;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(77,77,77,1);
					opacity:1;
					border-top: 1rpx solid rgba(230, 230, 230, 1);
				}
				.list{
					width:690rpx;
					height:140rpx;
					
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					&-img{
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					&-txt{
						margin-left: 20rpx;
						.phone{
							font-size:28rpx;
							font-family:PingFang SC;
							font-weight:bold;
							color:rgba(77,77,77,1);
							opacity:1;
						}
						.time{
							font-size:24rpx;
							font-family:PingFang SC;
							font-weight:500;
							color:rgba(149,151,166,1);
							opacity:1;
							margin-top: 20rpx;
						}
					}
					&-money{
						margin-left: auto;
						height: 140rpx;
						.ranking{
							width: 200rpx;
							height: 80rpx;
							position: relative;
							image{
								width: 60rpx;
								height: 70rpx;
								position: absolute;
								right: 0rpx;
								z-index: 99;
							}
							.paimi{
								width:38rpx;
								height:38rpx;
								font-size:28rpx;
								font-family:PingFang SC;
								font-weight:bold;
								position: absolute;
								right: 0rpx;
								top: 24rpx;
								color:rgba(53,133,255,1);
								opacity:1;
							}
						}
						.price{
							font-size:26rpx;
							font-family:PingFang SC;
							font-weight:400;
							color:rgba(89,89,89,1);
							opacity:1;
							text{
								color: rgba(255, 97, 82, 1);
							}
						}
					}
				}
			}
		}
		&-search{
			width:690rpx;
			height:64rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 2rpx 12rpx rgba(0,0,0,0.15);
			opacity:1;
			border-radius:10rpx;
			margin: auto;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			.icon{
				width: 34rpx;
				height: 34rpx;
				margin-right: 32rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.input{
				
			}
		}
		&-head{
			width:100%;
			height:88rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 6rpx rgba(0,0,0,0.06);
			opacity:1;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 998;
			.modal{
				position: absolute;
				width:100%;
				height:226rpx;
				background:rgba(255,255,255,1);
				opacity:1;
				bottom: -226rpx;
				left: 0;
				// margin-top: 176rpx;
				&-list{
					width: 100%;
					position: absolute;
					bottom: 0;
					border-top: 1rpx solid rgba(242, 242, 242, 1);
					.option{
						width: 100%;
						padding: 20rpx 32rpx;
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(89,89,89,1);
						opacity:1;
						display: flex;
						align-items: center;
						border-bottom: 1rpx solid rgba(242, 242, 242, 1);
						&-icon{
							margin-left: auto;
							width: 22rpx;
							height: 22rpx;
							opacity:0;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.icons{
							opacity:1;
						}
					}
				}
			}
			.all{
				margin-left: auto;
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(0,144,250,1);
				opacity:1;
				display: flex;
				height: 50rpx;
				align-items: center;
				&-img{
					width: 14rpx;
					height: 48rpx;
					margin-left: 5rpx;
					image{
						width: 14rpx;
						height: 14rpx;
					}
				}
				&-txt{
					
				}
			}
			.arrows{
				width: 14rpx;
				height: 14rpx;
				position: absolute;
				top: 29rpx;
				right: 36rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.list{
				display: flex;
				height:88rpx;
				align-items: center;
				margin-right: 34rpx;
				&-round{
					width:22rpx;
					height:22rpx;
					background:rgba(255,255,255,1);
					border:2rpx solid rgba(166,166,166,1);
					border-radius:50%;
					opacity:1;
					margin-right: 16rpx;
					.centre{
						width:10rpx;
						height:10rpx;
						background:rgba(0,144,250,1);
						border:2rpx solid rgba(0,144,250,1);
						border-radius:50%;
						opacity:0;
						margin: 0 auto;
						margin-top: 5rpx;
					}
					.centres{
						opacity:1;
					}
				}
				.loop{
					border:2rpx solid rgba(0,144,250,1);
				}
				&-title{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
		}
	}
</style>
